<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!--
        form自带的可以发送请求
        action 请求地址 会带有默认行为 会跳转到这个请求地址上（缺点）
        method 请求方式 默认是get

        提交事件被触发时，会携带带有name属性的所有表单标签及内容到请求地址上
        会将name属性的作为属性名 input的内容作为属性值 以键值对的形式携带在请求中

        https://cnodejs.org/api/v1/topics?page=1&tab=&limit=1
        当请求时get请求时，会将数据拼接在url路径之后  ？后面是数据 属性名=属性值$属性名2=属性值2

        请求的数据类型
        application/x-www-form-urlencoded   文本数据
        multipart/form-data   针对文件数据
        text/plain   纯文本编码

        get 是 http请求的一种 表示获取数据类型的请求
     -->
    <form action="https://cnodejs.org/api/v1/topics" method="get" enctype="text/plain">
        <!--  <input type="text" name="page">
        <input type="text" name="tab"> -->
        <input type="text" name="limit">
        <input type="submit" value="提交按钮">
        <script>
            document.forms[0].onsubmit = function (e) {
                e.preventDefault(); // 阻止了action的触发
                // console.log('=====');


                /* 
                获取一个form-data格式的数据，会将form表单中所有带有name属性的标签内容获取到
                获取的数据 name属性值作为属性名：input的value
                */
                var data = new FormData(document.forms[0]);
                console.log(data); // FormDate 对象
                console.log(data.get('limit')); // 获取FormDate 中某个属性的值
                data.append('age', 18); // 往FomeData对象中添加新的数据
                console.log(data.get('age'));
            }
        </script>
    </form>
</body>

</html>